<template>
  <view class="containter">
    <view class="dayun-year-box">
      <view class="dayun-item">
        <view class="dayun-year"></view>
      </view>
      <template v-for="(item,index) in dayunData.customLiuNian">
        <view class="dayun-item" :key="index" @click="liunianClick(item, index)">
          <view class="dayun-year">{{item.year}}</view>
        </view>
      </template>
    </view>
    <view class="dayun-box">
      <view class="dayun-item">
        <view class="dayun-info">流年</view>
      </view>
      <template v-for="(item,index) in dayunData.customLiuNian">
        <view class="dayun-item" :key="index" @click="liunianClick(item, index)">
          <view class="dayun-info" :class="[liunianIndex == index ? 'dayun-select' : '',]">
            {{item.ganZhi}}
<!--            <view class="dayun-ele">
              <view class="dayun-ganzhi" :style="fiveElementInfo(item.ganZhi[0])">{{item.ganZhi[0]}}</view>
              <view class="dayun-shishen">{{item.shiShen[0][0]}}</view>
            </view>
            <view class="dayun-ele">
              <view class="dayun-ganzhi" :style="fiveElementInfo(item.ganZhi[1])">{{item.ganZhi[1]}}</view>
              <view class="dayun-shishen">{{item.shiShen[1][0]}}</view>
            </view> -->
          </view>
        </view>
      </template>
    </view>
  </view>
</template>
<script>
  import wuxingColor from '@/utils/wuxing.js'
  import  { EventBus } from '@/main.js'
  export default {
    props: {
      result: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        isOpen: true,
        baziResult: this.result,
        dayunData: [],
        liunianIndex: undefined
      }
    },
    mounted() {
      EventBus.$on('dayun', param => {
        this.liunianIndex = 0;
        this.dayunData = param.dayunData;
        if (param.isFirst==true) {
          // 如果是第一次默认选择当前年
          let nowYear = new Date().getFullYear();
          // 若不存此项则取默认第一项
          let targetItem = this.dayunData.customLiuNian[0];
          for (let [index, item] of this.dayunData["customLiuNian"].entries()) {
            if (nowYear == item.year) {
              targetItem = item;
              this.liunianIndex = index;
              break
            }
          }
          this.$emit('change', targetItem);
          EventBus.$emit('liunian', {
            liunianData: targetItem
          })
        }else{          
          let data = this.dayunData.customLiuNian[0];
          this.$emit('change', this.dayunData.customLiuNian[0]);
          EventBus.$emit('liunian', {
            liunianData: data
          })
        }
      })
      this.isOpen = true;
    },
    beforeDestroy(){
      EventBus.$off("dayun")
    },
    methods: {
      // 对应五行信息
      fiveElementInfo(str) {
        let { color } = wuxingColor.getJiuLongGanzhiWuxingColorInfo(str);
        return `color: ${color}`
      },
      liunianClick(data, index) {
        if (this.liunianIndex == index) return
        this.liunianIndex = index;
        this.$emit('change', data);
        EventBus.$emit('liunian', {
          liunianData: data
        })
      }
    }
  };
</script>

<style lang="scss" scoped>
  .containter {
    width: 100%;
    box-sizing: border-box;
    font-weight: bold;
    background-color: #eeeeee;
  }
  .dayun-year-box {
    background-color: #cccccc;
  }
  .dayun-box, .dayun-year-box {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;

    .dayun-item {
      display: flex;
      flex: 1 0;
      min-width: 0;
      flex-direction: column;
      align-items: center;
      box-sizing: border-box;

      .dayun-year {
        width: 100%;
        font-size: 20rpx;
        text-align: center;
        white-space: nowrap;
      }

      .dayun-info {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        white-space: nowrap;
        .dayun-ele {
          display: flex;
          flex-direction: row;
          line-height: 44rpx;

          .dayun-ganzhi {
            font-size: 40rpx;
            padding-right: 4rpx;
          }

          .dayun-shishen {
            font-size: 20rpx;
            color: #4B240D;
          }
        }
      }
    }
  }
  .dayun-select {
    background-color: #999999;
  }
</style>